<template>
  <div class="cart-main">
    <div v-if="cartData.length>0">
      <div class="cart-item" v-for="(item,index) in cartData" :key="item.id">
        <div class="cart-left">
          <div class="select" @click="select(item)">
            <img v-show="!item.isSelect" src="~assets/images/icon/circle@noselected.png" alt />
            <img v-show="item.isSelect" src="~assets/images/icon/circle@selected.png" alt />
          </div>
          <div class="main-img">
            <img :src="item.main_img_url" alt />
          </div>
        </div>

        <div class="cart-rigth">
          <div class="f-j-b">
            <span>{{item.name}}</span>
            <div>¥{{item.price}}</div>
          </div>

          <div class="f-j-b">
            <div>
              <span @click="jian(item)">-</span>
              <span class="cout">{{item.cout}}</span>
              <span @click="add(item)">+</span>
            </div>
            <div @click="del(index)">X</div>
          </div>
        </div>
      </div>

      <div class="f">
        <div class="f-left" @click="allSelect">
          <img v-if="isAllSelect" src="~assets/images/icon/all@selected.png" alt />
          <img v-else src="~assets/images/icon/all.png" alt />
          <span class="selected">全选({{sumNum}})</span>
        </div>

        <div class="f-rigth" @click="order">
          <span>下单</span>｜
          <span>¥ {{totalPrice}}</span>
          <img src="~assets/images/icon/arrow@grey.png" alt />
        </div>
      </div>
    </div>
    <div v-else>您还未添加任何商品呢~</div>
  </div>
</template>
<script>
export default {
  name: "cart",
  components: {},
  computed: {
    totalPrice() {
      /**计算总价
       *
       */
      let sumPrice = 0; // 总价
      let sumNum = 0; // 总数量
      let selectNum = 0; // 选择的数量
      this.cartData.forEach(item => {
        if (item.isSelect) {
          sumPrice += item.cout * item.price;
          sumNum += item.cout;
          selectNum++;
        }
      });
      this.isAllSelect = this.cartData.length === selectNum ? true : false;
      this.sumNum = sumNum;
      this.$storage.setStorage("cart", this.cartData);
      return sumPrice.toFixed(2);
    }
  },
  data() {
    return {
      cartData: [],
      isAllSelect: false,
      sumPrice: 0,
      sumNum: 0
    };
  },
  created() {
    const cart = this.$storage.getStorage("cart");
    this.cartData = cart ? cart : [];
  },

  methods: {
    select(item) {
      /**选中和取消
       * item { Object} 当前选中项
       */
      item.isSelect = !item.isSelect;
    },
    del(index) {
      /**删除
       * index { int} 当前选中 索引
       */
      this.cartData.splice(index, 1);
    },
    jian(item) {
      if (item.cout < 2) return;
      item.cout--;
    },
    add(item) {
      item.cout++;
    },
    allSelect() {
      /**全选和全不选
       *
       */
      let is = true;
      if (this.isAllSelect) {
        is = false;
      }
      this.cartData.forEach(element => {
        element.isSelect = is;
      });
    },
    order() {
      if (this.sumNum < 1) {
        alert("请勾选商品");
        return
      }
      this.$router.push({
        path:"/order"
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.cart-main {
  @include s-y-h(4.9rem);
  font-size: 0.6rem;
  .cart-item {
    display: flex;
    padding: 0 0.5rem;
    border-bottom: 1px solid #ccc;
    .cart-left {
      display: flex;
      align-items: center;
      .select {
        img {
          width: 1rem;
          height: 1rem;
        }
      }
      .main-img {
        width: 3.5rem;
        height: 3.5rem;
      }
    }
    .cart-rigth {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .cout {
        margin: 0 0.5rem;
      }
      .f-j-b {
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .f {
    position: fixed;
    bottom: 2.5rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ab956d;
    color: #fff;
    height: 2.3rem;
    .f-left {
      display: flex;
      align-items: center;
      margin-left: 0.5rem;
      img {
        width: 1rem;
        height: 1rem;
      }

      .selected {
        margin: 0 0.5rem;
      }
    }
    .f-rigth {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 45%;
      img {
        width: 0.7rem;
        height: 0.6rem;
      }
    }
  }
}
</style>